import React, {useEffect, useState} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {IUserInfo} from '@/models/user';
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '@/models/index';
import LinearGradient from 'react-native-linear-gradient';
import {getHeight, getWidth} from '../../utils/index';

import {
  View,
  Text,
  StyleSheet,
  Image,
  PixelRatio,
  ScrollView,
  Modal,
  TouchableHighlight,
  Alert,
} from 'react-native';
import Touchable from '../../components/Touchable';
import IconFont, {IconNames} from '../../assets/iconfont';
import Toast from 'react-native-root-toast';
const mapStateToProps = ({users}: RootState) => {
  return {
    currentUser1:users?.user,
  };
};
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {
  navigation: {navigate: any};
  route: any;
}
function My(props: IProps) {
  const {navigation,currentUser1,dispatch} = props;
  const [modalVisiable, setModalVisiable] = useState<boolean>(false);

  // 修改密码
  const handlePassword = () => {
    navigation.navigate('ModifyPassWord', {
      username: currentUser1&& currentUser1[0].username ? currentUser1[0].username : '',
      user_id: currentUser1&& currentUser1[0]._id ? currentUser1[0]._id : '',
      password: currentUser1&& currentUser1[0].password ? currentUser1[0].password : '',
    });
  };
  // 退出登录
  const handleExit = () => {
    setModalVisiable(true);
  };
  // 收货地址
  const handleAddress = () => {
    // 跳转到收货地址页面
    navigation.navigate("Address");
  };
  // 成为摄影师
  const handleToBePhotographer = () => {
    // 先判断当前用户的身份是不是普通用户，如果当前用户的identity已经是摄影师，那么无法再成为摄影师
    if(currentUser1&& currentUser1[0].identity && currentUser1[0].identity === "摄影师"){
      Toast.show('您当前已经是摄影师，无需再成为摄影师', {
        position: Toast.positions.CENTER,
        duration: Toast.durations.LONG,
        shadow: true,
        animation: true,
      });
      return;
    }
    navigation.navigate("ToBePhotographer",{
      user_id: currentUser1&& currentUser1[0]._id ? currentUser1[0]._id : '',
    });
  }
  // 编辑用户信息
  const handleEditUserInfo = () => {
    navigation.navigate("EditUserInfo",{
      user_id: currentUser1&& currentUser1[0]._id ? currentUser1[0]._id : '',
    })
  }
  // 我的收藏
  const handleLike = () => {
    console.log("handleLike");
    navigation.navigate("Like",{
      user_id: currentUser1&& currentUser1[0]._id ? currentUser1[0]._id : '',
    })
  }
  // 我的发布
  const handlePublish = () => {
    navigation.navigate("Publish",{
      user_id: currentUser1&& currentUser1[0]._id ? currentUser1[0]._id : '',
    })
  }
  // 注销账号
  const destroyAccount = () => {
    navigation.navigate("DestroyAccount",{
      user_id: currentUser1&& currentUser1[0]._id ? currentUser1[0]._id : '',
    })
  }
  // 推荐套餐
  const hanldeRecommend = () => {
    if(currentUser1&& currentUser1[0].identity && currentUser1[0].identity !== "摄影师"){
      Toast.show('您的身份不是摄影师，无法发布摄影套餐，您可以选择先注册称为摄影师', {
        position: Toast.positions.CENTER,
        duration: Toast.durations.LONG,
        shadow: true,
        animation: true,
      });
      return;
    }
    navigation.navigate("RecommendPackage",{
      user_id: currentUser1&& currentUser1[0]._id ? currentUser1[0]._id : '',
    });
  }
  useEffect(()=>{
    console.log("当前用户信息1111111111111",currentUser1)
  })
  return (
    <View style={styles.my}>
      {(JSON.stringify(currentUser1) === "[]") ? (
        <View style={styles.main}>
          <View style={styles.top1}>
            <LinearGradient
              colors={['#fff', '#A75E5E']}
              style={styles.linearGradient}></LinearGradient>
            <LinearGradient
              colors={['#fff', 'black']}
              style={styles.linearGradient1}>
              <Image
                source={require('../../assets/localImage/login1.png')}
                style={styles.scurpture}></Image>
            </LinearGradient>
            <Touchable
              style={styles.loginText}
              onPress={() => {
                navigation.navigate('Login');
              }}>
              <Text style={styles.text1}>去登录</Text>
            </Touchable>
          </View>
        </View>
      ) : (
        <View style={styles.main}>
          <View style={styles.top}>
            <LinearGradient
              colors={['#fff', '#A75E5E']}
              style={styles.linearGradient}></LinearGradient>
            <Text style={styles.text}>nickName:{currentUser1?currentUser1[0].username:""}</Text>
            <LinearGradient
              colors={['#fff', '#A75E5E']}
              style={styles.linearGradient1}>
              <Image
                source={{uri: currentUser1?currentUser1[0].scurpture :""}}
                style={styles.scurpture}></Image>
            </LinearGradient>
          </View>
          <ScrollView style={styles.bottom}>
            <Touchable style={styles.item} onPress={handlePassword}>
              <IconFont
                style={styles.icon}
                name="icon-xiugai"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>修改密码</Text>
            </Touchable>
            <Touchable style={styles.item} onPress={handleExit}>
              <IconFont
                style={styles.icon}
                name="icon-back"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>退出登录</Text>
            </Touchable>
            <Touchable style={styles.item} onPress={handleAddress}>
              <IconFont
                style={styles.icon}
                name="icon-dizhi"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>收货地址</Text>
            </Touchable>
            <Touchable style={styles.item} onPress={handleToBePhotographer}>
              <IconFont
                style={styles.icon}
                name="icon-paizhao"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>成为摄影师</Text>
            </Touchable>
            <Touchable style={styles.item} onPress={handleEditUserInfo}>
              <IconFont
                style={styles.icon}
                name="icon-shangyiyehoutuifanhui-yuankuang"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>编辑详细信息</Text>
            </Touchable>
            <Touchable style={styles.item} onPress={handleLike}>
              <IconFont
                style={styles.icon}
                name="icon-lanling-ershoujiaoyi"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>我的收藏</Text>
            </Touchable>
            <Touchable style={styles.item} onPress={handlePublish}>
              <IconFont
                style={styles.icon}
                name="icon-jia"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>我的发布</Text>
            </Touchable>
            <Touchable style={styles.item} onPress={hanldeRecommend}>
              <IconFont
                style={styles.icon}
                name="icon-ershoushichang"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>推荐套餐</Text>
            </Touchable>
            {/* <Touchable style={styles.item}>
              <IconFont
                style={styles.icon}
                name="icon-ershouhuishou"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>我的购物</Text>
            </Touchable>
            <Touchable style={styles.item}>
              <IconFont
                style={styles.icon}
                name="icon-31xiaoxi"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>我的消息</Text>
            </Touchable> */}
            <Touchable style={styles.item} onPress={destroyAccount}>
              <IconFont
                style={styles.icon}
                name="icon-wenhao"
                size={22}
                color={'#A75E5E'}
              />
              <Text style={styles.itemText}>注销账号</Text>
            </Touchable>
          </ScrollView>
        </View>
      )}
      {modalVisiable && (
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisiable}
          // onRequestClose回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必需，且会在 modal 处于开启状态时阻止BackHandler事件。
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
            setModalVisiable(!modalVisiable);
          }}>
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text style={styles.modalText}>确定要退出登录么？</Text>

              <View style={styles.btn}>
                <TouchableHighlight
                  style={{...styles.openButton, backgroundColor: '#A75E5E'}}
                  onPress={() => {
                    // 直接关闭弹窗不做任何操作
                    setModalVisiable(!modalVisiable);
                  }}>
                  <Text style={styles.textStyle}>关闭</Text>
                </TouchableHighlight>

                <TouchableHighlight
                  style={{...styles.openButton, backgroundColor: '#A75E5E'}}
                  onPress={() => {
                    dispatch({
                      // 调用方法把dva里面保存的user清空
                      type: 'users/clearCurrentUser',
                    });
                    // 清空本地的token和用户信息并且跳转到首页，关闭弹窗
                    AsyncStorage.setItem('token', '');
                    AsyncStorage.setItem('currentUserInfo', '');
                    setModalVisiable(!modalVisiable);
                    navigation.navigate('Appointment');
                    Toast.show('退出登录成功，即将为您跳转首页', {
                      position: Toast.positions.CENTER,
                      duration: Toast.durations.LONG,
                      shadow: true,
                      animation: true,
                    });
                  }}>
                  <Text style={styles.textStyle}>确定</Text>
                </TouchableHighlight>
              </View>
            </View>
          </View>
        </Modal>
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  my: {
    flex: 1,
  },
  main: {
    flex: 1,
  },
  top: {
    width: '100%',
    position: 'relative',
  },
  top1: {
    width: '100%',
    position: 'relative',
  },
  linearGradient: {
    width: '100%',
    height: getHeight(20),
    paddingHorizontal: 15,
    borderRadius: 5,
  },
  linearGradient1: {
    width: 115,
    height: 115,
    borderRadius: 115,
    position: 'absolute',
    top: getHeight(12),
    left: getWidth(50) - 57,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    width: '100%',
    textAlign: 'center',
    fontSize: 24,
    fontWeight: '700',
    color: '#fff',
    position: 'absolute',
    top: getHeight(7),
 
  },
  text1: {
    width: '50%',
    textAlign: 'center',
    paddingVertical: 10,
    fontSize: 24,
    fontWeight: '700',
    color: "#fff",
    borderRadius: 30,
    backgroundColor: '#A75E5E',
  },
  loginText: {
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 30,
    position: 'absolute',
    top: getHeight(30),
  },
  scurpture: {
    width: 110,
    height: 110,
    borderRadius: 110,
  },
  bottom: {
    marginTop: 80,
    marginHorizontal: 10,
    backgroundColor: '#fff',
    borderRadius: 5,
  },
  item: {
    height: 60,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1 / PixelRatio.get(),
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  itemText: {
    fontSize: 16,
    paddingLeft: 5,
  },
  icon: {
    marginLeft: 15,
  },
  // 弹窗的样式
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  },
  modalView: {
    width: getWidth(70),
    margin: 10,
    // height:getHeight(30),
    backgroundColor: '#F6F2F2',
    // backgroundColor: '#ccc',
    borderRadius: 10,
    padding: 20,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 5,
      height: 7,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  btn: {
    display: 'flex',
    flexDirection: 'row',
  },
  openButton: {
    backgroundColor: '#A75E5E',
    borderRadius: 15,
    paddingHorizontal: 10,
    paddingVertical: 5,
    marginHorizontal: 15,
    elevation: 2,
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});
export default connector(My);
